<template>
	<view class="login">
		<view class="login-top">
			<image src="../../static/image/login.png" mode="aspectFit"></image>
		</view>
		<view class="login-main">
			<view class="login-main-h">
				<h3>欢迎使用智能耳标管理系统</h3>
			</view>
			<view class="login-main-in">
				<view class="login-main-one">
					<image src="../../static/image/username.png" mode="" class="main-one-image"></image>
					<input type="text" placeholder="请输入用户名" v-model="loginUserName" />
				</view>
				<view class="login-main-two">
					<image src="../../static/image/login-password.png" mode="" class="main-one-image"></image>
					<input type="password" placeholder="请输入密码" v-model="loginUserPassWord" />
				</view>
			</view>
			<view class="login-bottom"><u-button type="primary" @click="loginUser()" shape="circle">立即登录</u-button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginUserName: '',
				loginUserPassWord: ''
			};
		},
		methods: {
			loginUser() {
				//判断用户名密码是否为空
				if (this.$dm.isEmpty(this.loginUserName) || this.$dm.isEmpty(this.loginUserPassWord)) {
					this.$dm.showMessage('用户名和密码不能为空')
				} else {
					this.$u.api.login({
						username: this.loginUserName,
						password: this.loginUserPassWord
					}).then(res => {
						uni.setStorageSync('token', res.data.token)
						uni.switchTab({
							url: '../realtime/realtime'
						})
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.login {
		position: relative;
	}

	.login-top {
		background-color: #05ab9d;
		height: 560rpx;
	}

	.login-top image {
		width: 600rpx;
		margin-left: 80rpx;
	}

	.login-main {
		width: 690rpx;
		height: 800rpx;
		background: url(../../static/image/bj.png) no-repeat scroll;
		position: absolute;
		top: 440rpx;
		left: 30rpx;
		border-radius: 20rpx;
		background-size: 100%;
	}

	.login-main-h {
		margin-top: 30rpx;
		color: #04ac9d;
		margin-left: 70rpx;
		font-weight: 100;
	}

	.login-main-in {
		box-sizing: border-box;
		width: 570rpx;
		height: 250rpx;
		margin: 0 auto;
		padding-top: 1rpx;
	}

	.login-main-one,
	.login-main-two {
		width: 560rpx;
		height: 90rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 50rpx;
		border: 1rpx solid $u-border-color;
		display: flex;
	}

	.main-one-image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.login-main-one input,
	.login-main-two input {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.login-bottom {
		width: 560rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 50rpx;
		border: 1rpx solid $u-border-color;
		background-color: #05ab9d;
		vertical-align: middle;
	}

	/* .login-bottom button {
		background-color: #05ab9d;
		border-radius: 50rpx;
		color: #ffffff;
	} */
</style>
